/*
 * @Author: yangzonglong
 * @Date: 2021-03-01 13:18:46
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-27 16:22:29
 * @Auditor:
 */
import React, { useImperativeHandle, forwardRef } from 'react';

const HOLD = require('./imgs/hold.svg');

const defaultDivStyle = { padding: '8px 15px', width: '100%', background: '#fff' };
const defaultImgStyle = { maxWidth: '100%', height: 'auto' };

const getWidth = (formItemProps) => ({
  ...formItemProps?.style,
  width: (formItemProps?.style?.width || 0) + 'px',
  ...defaultImgStyle,
});

const App = (props, ref) => {
  const { formItemProps, imgProps } = props;

  useImperativeHandle(ref, () => {});

  return (
    <div {...formItemProps} style={{ ...defaultDivStyle, textAlign: formItemProps?.style?.textAlign }}>
      <img style={getWidth(formItemProps)} alt="" src={imgProps?.url || HOLD} />
    </div>
  );
};

export default forwardRef(App);
